require('../less/sportsData.less')
document.ready(function () {
    //获取元素节点
    let backward = document.getElementById('backward') //返回按钮 
    let spendT = document.getElementById('spendT') //花费时间
    let spendC = document.getElementById('spendC') //花费卡路里
    let myprofile = document.getElementById('myprofile') //头像
    let totalC = document.getElementById('totalC')  //消耗卡路里
    let punchDay = document.getElementById('punchDay') // 累计打卡
    let punchIn = document.getElementById('punchIn') // 连续累计打卡
    backward.addEventListener('click', function () {
        window.location.href = './mine.html'
    })

    // 指定图表的配置项和数据
    function sportsData(xData, yData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('currentData'));
        var option = {
            title: {
                text: '近七天运动数据', //标题,
                textStyle: {
                    color: "#4294FF"
                }
            },
            color: ['#3398DB'], //柱子颜色
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            //网格
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            //X轴
            xAxis: [{
                type: 'category', //类目
                data: xData,
                axisTick: {
                    alignWithLabel: true //下面参数是否居中
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            //系列列表
            series: [{
                name: '直接访问',
                type: 'bar',
                barWidth: '60%',
                data: yData
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    let Id = JSON.parse(window.localStorage.getItem('userData')).userId //获取本地数据
    function ajaxPicker() {
        //发送ajax获取数据
        window.$http.get(`/sport/data/${Id}`, function (res) {
            if (res.status == 0) {
                // console.log(res);
                let xData = res.data.days.map(function (v) {
                    return v.date.substr(5)
                })
                let yData = res.data.days.map(function (v) {

                    return v.dayTimes

                })
                sportsData(xData, yData)
            }

        })

    }
    ajaxPicker()

    //饼状图
    function yuan() {
        var myChart = echarts.init(document.getElementById('classifysports'));
        var option = {
            title: {
                text: '运动分类',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['骑行', '跑步', '训练']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [{
                        value: 335,
                        name: '骑行'
                    },
                    {
                        value: 310,
                        name: '跑步'
                    },
                    {
                        value: 234,
                        name: '训练'
                    }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    }
    yuan();
    // 表格蒙版层渲染


    //获取本地数据
    let arr = JSON.parse(window.localStorage.getItem('sportsData'))
    spendC.textContent = arr.calorie  //消耗卡路里
    spendT.textContent = arr.times   //花费时间
    totalC.textContent= arr.calorie  //消耗卡路里
    punchDay.textContent=arr.punchin  //累计打卡
    punchIn.textContent=arr.punchin   //累计打卡
//获取本地存储
let data=JSON.parse(window.localStorage.getItem('userData'))
myprofile.src='http://139.9.177.51:8099'+data.imgurl






})